import React, { Component,createContext } from 'react'


/*
  1. 创建一个上下文
  const TitleContext = createContext()

  2. 使用上下文对象中的 Provider 组件，配合 value 属性进行值的传递
  <TitleContext.Provider value={'卫龙'}>
    <First  />
  </TitleContext.Provider>

  3. 类组件接收参数
    3.1 通过静态属性进行接收  static contextType = TitleContext
    3.2 通过 组件名.contextType 的方式进行接收 First.contextType = TitleContext
  4. 使用数据 {this.context}

  3. 函数组件接收参数
    通过 TitleContext.Consumer 进行数据的接收，在函数式组件中，后期我们会使用 useContext 的 hooks 来进行接收
    <TitleContext.Consumer>
      {(value)=>{
        // 使用数据
        return (<h1>Section: {value}</h1>)
      }}
    </TitleContext.Consumer>
*/ 



// 1. 创建一个上下文
const TitleContext = createContext()

class First extends Component {

  // 3.1 通过静态属性进行接收
  // static contextType = TitleContext

  render(){
    return (<div>
      {/* 4. 使用 this.context 拿到我们传递的数据然后使用 */}
      First： {this.context}
      <Section  />
    </div>)
  }
}
// 3.2 通过 组件名.contextType 的方式进行接收
First.contextType = TitleContext

const Section = ()=>{
  return (<div>

    {/* 
      3. 通过 TitleContext.Consumer 进行数据的接收，在函数式组件中，
      后期我们会使用 useContext 的 hooks 来进行接收 
    */}
    <TitleContext.Consumer>
      {(value)=>{
        // 使用数据
        return (<h1>Section: {value}</h1>)
      }}
    </TitleContext.Consumer>

    
  </div>)
}

export default class App extends Component {
  render() {
    return (
      <div>
        App

        {/* 2. 使用上下文对象中的 Provider 组件，配合 value 属性进行值的传递 */}
        <TitleContext.Provider value={'卫龙'}>
          <First  />
        </TitleContext.Provider>
        
      </div>
    )
  }
}
